<template>
    <div class="detail">
        <van-nav-bar title="产品详情" fixed>
            <template #left>
                <van-icon name="arrow-left" size="24" color="#999" @click="back"/>
            </template>
        </van-nav-bar>
        <div>
            <img :src="mess.product_base_info.pro_pic_url" alt="" width='100%' height='200'>
            <p class="title">{{mess.product_base_info.pro_title}}</p>
            <ul class="list">
                <li><span>适宜季节：</span><span v-for="(item,index) in mess.product_base_info.product_season" :key="index">{{item.season}}</span></li>
                <li><span>主题：</span><span v-for="(item,index) in mess.product_base_info.product_type" :key="index">{{item.type}}</span></li>
            </ul>
            <div class="type">
                <van-grid direction="horizontal" :column-num="3">
                    <van-grid-item  text="单价" />
                    <van-grid-item  :text="String(mess.product_base_info.man_price)+this.word[2]" />
                    <van-grid-item  :text="String(mess.product_base_info.children_cost)+this.word[2]" />
                </van-grid>
                <van-grid direction="horizontal" :column-num="3">
                    <van-grid-item  text="人数" default="hahaha"/>
                    <van-grid-item  text="成人" />
                    <van-grid-item  text="儿童" />
                </van-grid>
                <van-cell-group>
                    <van-cell title="日期" icon="clock-o" :value="mess.product_base_info.out_time"/>
                    <van-cell title="出发" icon="flag-o" :value="mess.product_base_info.out_address"/>
                </van-cell-group>
                <van-cell-group style="margin-top:0.5rem">
                    <van-cell title="周期" icon="clock-o" :value="mess.product_base_info.routing_dat+this.word[0]+mess.product_base_info.routing_nigth+this.word[1]"/>
                    <van-cell title="国家" icon="location-o" :value="mess.country"/>
                </van-cell-group>
                <van-cell-group style="margin-top:0.5rem">
                    <van-cell title="商家" icon="shop-o" :value="mess.seller_nick_name"/>
                </van-cell-group>
                <van-cell is-link title="定制旅行，有什么不同" @click="show = true" style="margin-top:0.5rem;text-align:center;font-size:18px;font-weight:bold;" />
                <van-action-sheet v-model="show" title="----定制旅行，有什么不同----">
                    <ul class="content">
                        <li>
                            <van-icon name="like" size='16' color="pink"/>
                            <span class="con-span">省心</span>
                            <em>量身设计路线，不用做攻略</em>
                        </li>
                        <li>
                            <van-icon name="gift-o" size='16' color="pink"/>
                            <span class="con-span">品质</span>
                            <em>全程高档商务车，中文导游，不用懂外语</em>
                        </li>
                        <li>
                            <van-icon name="thumb-circle-o" size='16' color="pink"/>
                            <span class="con-span">私密</span>
                            <em>独立成团，不用和陌生人拼团坐</em>
                        </li>
                        <li>
                            <van-icon name="flower-o" size='16' color="pink"/>
                            <span class="con-span">专享</span>
                            <em>1对1专人服务，专属旅行管家</em>
                        </li>
                    </ul>
                </van-action-sheet>
            </div>
            <div class="lightspot">
                    <h3 class="lightspot-h">行程亮点</h3>
                    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                        <van-swipe-item v-for="item in mess.product_base_info.product_bright" :key="item.id" v-show="hasBright">
                            <img :src="item.photoUrl" alt="" width="100%" height="400">
                            <div class="bright-box">
                                <h3 class="bright-h2">{{item.name}}</h3>
                                <p class="bright-p">{{item.bright}}</p>
                            </div>
                        </van-swipe-item>
                    </van-swipe>
                    <ul class="bright-ul" v-show="!hasBright">
                        <li><van-icon name="flower-o" size="30" color="pink" style="margin-right:3rem;"/>{{mess.product_base_info.bright_1}}</li>
                        <li><van-icon name="flower-o" size="30" color="pink" style="margin-right:3rem;"/>{{mess.product_base_info.bright_2}}</li>
                        <li><van-icon name="flower-o" size="30" color="pink" style="margin-right:3rem;"/>{{mess.product_base_info.bright_3}}</li>
                        <li><van-icon name="flower-o" size="30" color="pink" style="margin-right:3rem;"/>{{mess.product_base_info.bright_4}}</li>
                    </ul>
            </div>
            <p class="reserveBtn" @click="goprocess">立即定制</p>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Grid, GridItem,Cell ,CellGroup,ActionSheet,Swipe,SwipeItem,NavBar} from 'vant';

Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(ActionSheet);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(NavBar);
export default {
    data () {
        return {
            mess:[],
            word:['天','晚','元起'],
            show: false,
            hasBright:false,
        };
    },

    components: {},

    computed: {},

    created(){
        // 隐藏底部导航
        this.$store.commit('my/setIsShow',false)

        // 获取随着地址栏传过来的id
        let path=this.$route.params.proId
        let url="http://www.51houniao.com/product/product/getProductDetails/"+path
        // 请求地址:http://www.51houniao.com/product/product/getProductDetails/1fdab5ebeb9644359f296c9697aab32a
        this.$http.get(url)
        .then(res =>{
            this.mess=res
            // console.log(res)
            // console.log(JSON.parse(JSON.stringify(res)))
            this.$nextTick(()=>{
                // console.log(this.mess.product_base_info.product_bright.length)
                if(this.mess.product_base_info.product_bright.length>0){
                    this.hasBright=true;
                    // console.log(this.hasBright)
                }
            })
        })
        .catch(err=>{
            console.log(err)
        });
    },

    mounted() {
        
    },

    beforeDestroy(){
        // 离开此页面就显示底部导航栏
        this.$store.commit('my/setIsShow',true)
    },

    methods: {
        showPopup() {
            this.show = true;
        },
        back(){
            this.$router.go(-1)
        },
        goprocess(){
            this.$router.push('/custom')
        }
    }
}

</script>
<style scoped>
.detail{
    background: #f2f2f2;
}
img{
    display: block;
}
.title{
    width:100%;
    line-height:36px;
    background: #ddd;
    font-size:18px;
    font-weight:bold;
    margin:0px;
    text-align: center;
}
.list{
    margin-top:15px;
}
.list li{
    line-height:50px;
    color:#7e7e7e;
    font-size:14px;
    padding:0 10px;
    background: white;
    border-bottom:1px solid #ccc;
}
.list span{
    display: inline-block;
    margin-right:10px;
}
.list li:nth-of-type(1) span:nth-of-type(1){
    margin-right:20px;
}
.list li:nth-of-type(2) span{
    margin-right:5px;
}
.content {
    padding: 16px 16px 16px;
}
.content li{
    line-height:3rem;
    font-size:14px;
    color:pink;
    font-weight:normal;
}
.content .con-span{
    font-size:16px;
    
}
.content .van-icon{
    margin-left:1rem;
}
.content li span{
    display: inline-block;
    margin-left:0.2rem;
    color:#333;
}
.content li em{
    display: inline-block;
    margin-left:0.8rem;
    color:#333;
    font-size:12px;
}
.lightspot{
    margin-bottom:100px;
}
.lightspot-h{
    width:24%;
    padding:5px;
    margin:20px auto;
    text-align:center;
    border:1px solid black;
    border-radius: 5px;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #fff;
}
.bright-box{
    width:100%;
    height:10rem;
    background: #f2f2f2;
}
.bright-h2{
    padding:10px 10px 0 0;
    line-height:30px;
    text-align: right;
    color:black;
    margin:0px;
}
.bright-p{
    font-size:12px;
    margin-left:30px;
    line-height:16px;
    color:black;
}
.bright-ul li{
    line-height:2rem;
    font-size:14px;
    background: #fff;
    color:#445356;
    margin:0.3rem 0 0.3rem 0;
}
.reserveBtn{
    width:100%;
    line-height:3rem;
    background: #ec7a27;
    text-align:center;
    position:fixed;
    bottom:0;
    margin:0px;
}
</style>